<template>
  <div class="footer-container">
    <div class="foonter-center">
      <ul class="footer-top">
        <li>
          <i class="iconfont icon-a-anquanzhongxindunpai styleicon"></i>
          <span>百强企业 品质保证</span>
        </li>
        <li>
          <i class="iconfont icon-rili styleicon"></i>
          <span>7天退货 15天换货</span>
        </li>
        <li>
          <i class="iconfont icon-shequ styleicon"></i>
          <span>48元起免运费</span>
        </li>
        <li>
          <i class="iconfont icon-dingwei styleicon"></i>
          <span>2000家服务店 全国联保</span>
        </li>
      </ul>
      <div class="footer-center">
        <dl class="s1">
          <dt>
            <p class="title">购物指南</p>
          </dt>
          <dd>
            <ol>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-4359.html"
                  rel="nofollow"
                  >免息分期</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-7923.html"
                  rel="nofollow"
                  >以旧换新</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-13022.html"
                  rel="nofollow"
                  >众测活动</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-9295.html"
                  rel="nofollow"
                  >企业购</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-13020.html"
                  rel="nofollow"
                  >O2O采购</a
                >
              </li>
            </ol>
          </dd>
        </dl>
        <dl class="s1">
          <dt>
            <p class="title">售后服务</p>
          </dt>
          <dd>
            <ol>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-4359.html"
                  rel="nofollow"
                  >门店维修</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-7923.html"
                  rel="nofollow"
                  >保修政策</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-13022.html"
                  rel="nofollow"
                  >防伪查询</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-9295.html"
                  rel="nofollow"
                  >退换货政策</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-13020.html"
                  rel="nofollow"
                  >手机寄修服务</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-13020.html"
                  rel="nofollow"
                  >维修备件价格查询</a
                >
              </li>
            </ol>
          </dd>
        </dl>
        <dl class="s1">
          <dt>
            <p class="title">维修与技术支持</p>
          </dt>
          <dd>
            <ol>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-4359.html"
                  rel="nofollow"
                  >服务店</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-7923.html"
                  rel="nofollow"
                  >预约维修</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-13022.html"
                  rel="nofollow"
                  >手机寄修</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-9295.html"
                  rel="nofollow"
                  >备件价格查询</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-13020.html"
                  rel="nofollow"
                  >上门服务</a
                >
              </li>
            </ol>
          </dd>
        </dl>
        <dl class="s1">
          <dt>
            <p class="title">特色服务</p>
          </dt>
          <dd>
            <ol>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-4359.html"
                  rel="nofollow"
                  >防伪查询</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-7923.html"
                  rel="nofollow"
                  >补够保障</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-13022.html"
                  rel="nofollow"
                  >以旧换新</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-9295.html"
                  rel="nofollow"
                  >礼品包装</a
                >
              </li>
            </ol>
          </dd>
        </dl>
        <dl class="s1">
          <dt>
            <p class="title">关于我们</p>
          </dt>
          <dd>
            <ol>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-4359.html"
                  rel="nofollow"
                  >公司介绍</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-7923.html"
                  rel="nofollow"
                  >华为零售店</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-13022.html"
                  rel="nofollow"
                  >商家中心</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-9295.html"
                  rel="nofollow"
                  >意见反馈</a
                >
              </li>
            </ol>
          </dd>
        </dl>
        <dl class="s1">
          <dt>
            <p class="title">友情链接</p>
          </dt>
          <dd>
            <ol>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-4359.html"
                  rel="nofollow"
                  >华为集团</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-7923.html"
                  rel="nofollow"
                  >华为消费者业务</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-13022.html"
                  rel="nofollow"
                  >华为云</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-9295.html"
                  rel="nofollow"
                  >华为应用市场</a
                >
              </li>
              <li>
                <a
                  target="_blank"
                  href="https://www.vmall.com/help/faq-13020.html"
                  rel="nofollow"
                  >华为心声社区</a
                >
              </li>
            </ol>
          </dd>
        </dl>
        <div class="footer-center-last">
          <div class="footer-center-phone">950805</div>
          <p class="text">7 x 24 小时客服热线 (仅收市话费)</p>
          <div class="footer-center-serve"><span>在线客服</span></div>
          <div class="attention">
            <span class="attention-action"
              ><em>关注VMALL:</em>
              <span class="iconfont icon-weixin iconstyle"></span>
              <span class="iconfont icon-toutiaoyangshi iconstyle"></span>
              <span class="iconfont icon-xinlangweibo iconstyle"></span>
              <span class="iconfont icon-BaiDu iconstyle"></span>
            </span>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="footer-bottom-left">
          <p class="img-log">
            <img src="./images/fonter-log.png" alt="华为商城" />
          </p>
          <div class="footer-bottom-center">
            <ul>
              <li><a href="">华为商城</a></li>
              <li><a href="">华为CBG官网</a></li>
              <li><a href="">华为应用市场</a></li>
              <li><a href="">HarmonyOS</a></li>
              <li><a href="">华为终端云空间</a></li>
              <li><a href="">开发者联盟</a></li>
              <li><a href="">华为商城手机版</a></li>
            </ul>
            <span class="margin-span">
              <a href="#" rel="nofollow" title="隐私声明">隐私声明</a>
              <a href="#" rel="nofollow" title="服务协议">服务协议</a>
              <a href="#" rel="nofollow" title="COOKIES">COOKIES</a>
              "Copyright © 2012-2022 华为终端有限公司 版权所有"
              <a href="#" rel="nofollow" title="隐私声明">| 经营资质 |</a>
              <a href="#" rel="nofollow" title="隐私声明"> 粤ICP备19015064号</a>
              <a href="">|粤公网安备 44190002003939号</a>
            </span>
            <br />
            <span class="margin-span">
              <a href="#">增值电信业务经营许可证:粤B2-20190762</a>
              <a href="#">|备案主体编号:44201919072182</a>
              <a href="#">|粤新出网备(2021)2号|</a>
              <a href="#">（粤）网械平台备字[2022]第00005号</a>
            </span>
            <br />
            <span class="margin-span">
              <a href="#"
                >互联网药品信息服务资格证（粤）-非经营性-2020-0102 |</a
              >
              <a href="#">粤东食药监械经营备20203930 |</a>
              <a href="#"> 广东省网络食品交易第三方平台备案：GDWS10168</a>
            </span>
          </div>
          <p class="img-images"><img src="./images/zhizhao.png" alt="" /></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Footer",
  components: {},
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.footer-container {
  background-color: #ffffff;
  .foonter-center {
    width: 1200px;
    margin: 0 auto;
    a:hover {
      color: #ff0000;
      cursor: pointer;
    }
    .footer-top {
      padding: 24px 0;
      display: flex;
      border-bottom: 1px solid #f2f2f2;
      justify-content: space-between;
      li {
        font-size: 18px;
        // padding: 24px 35px 24px 56px;
        .styleicon {
          display: inline-block;
          text-align: center;
          font-size: 30px;
          color: #ff0000;
          width: 40px;
          height: 40px;
          line-height: 40px;
          border: 1px solid #ff0000;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 15px;
        }
      }
    }
    .footer-center {
      padding: 56px 0 40px 0;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      justify-content: space-between;
      .s1 {
        .title {
          margin-bottom: 32px;
          font-size: 14px;
        }
        li {
          line-height: 17px;
          margin-bottom: 10px;
        }
        a {
          font-size: 12px;
          color: rgba(0, 0, 0, 0.5);
        }
        a:hover {
          color: red;
        }
      }
      .footer-center-last {
        display: flex;
        flex-direction: column;
        .footer-center-phone {
          text-align: center;
          font-size: 24px;
        }
      }
      .text {
        font-size: 13px;
        margin-top: 8px;
        // background-color: #c8c8c8;
      }
      .footer-center-serve {
        margin: 18px auto;
        span {
          cursor: pointer;
          display: inline-block;
          width: 170px;
          height: 34px;
          color: white;
          text-align: center;
          font-size: 12px;
          line-height: 34px;
          background-color: #191919;
          border-radius: 16px;
        }
      }
      .attention {
        .attention-action {
          em {
            font-size: 13px;
          }
          .iconstyle {
            margin: 0 8px;
            font-size: 20px;
          }
        }
      }
    }
    .footer-bottom {
      .footer-bottom-left {
        padding-top: 33.5px;
        padding-bottom: 40px;
        display: flex;
        justify-items: left;
        vertical-align: top;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.4);
        .img-log {
          padding-right: 26px;
          img {
            width: 82px;
            cursor: pointer;
          }
        }
        .footer-bottom-center {
          width: 1028px;
          ul {
            margin-top: -5px;
            margin-bottom: 6px;
            display: flex;
            justify-items: left;
            li {
              padding-right: 6px;
              margin-right: 6px;
              border-right: 1px solid #e5e5e5;
            }
          }
          .margin-span {
            display: inline-block;
            margin-bottom: 6px;
          }
        }
        .img-images {
          width: 90px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
